vuejs怎么实现全局状态管理 |
您所在的位置:网站首页 › vueuse install › vuejs怎么实现全局状态管理 |
在vuejs中可以利用vuex实现全局状态管理;Vuex是一个专为Vue.js应用程序开发的状态管理模式,可以用来管理全局数据,可以管理复杂应用的数据状态,比如兄弟组件的通信、多层嵌套的组件的传值等等。 本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。 vuex全局状态管理Vuex 是一个专为Vue.js 应用程序开发的状态管理模式。可以管理复杂应用的数据状态,比如兄弟组件的通信、多层嵌套的组件的传值等等。 通俗的来说vuex就是全局数据管理,用来管理全局数据的,vue原本的数据管理只能父子组件之间传递数据,并且不方便,使用vuex可以进行全局数据管理,将所有数据存储到vuex中,使用时调用。 vuex的核心: statemutationsactionsgetterVuex的用法安装并使用vuex 安装 1.在项目中进行安装 npm install vuex --save2.新建一个store.js文件 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { //存放初始数据 count: 0 }, mutations: { //存放修改数据的方法 increment (state) { state.count++ } } })使用数据 方法一:使用$store调用 在组件中直接使用this.$store.state调用数据 this.$store.state.数据名方法二:导入mapState,在组件中将数据展开映射,需要写到计算属性中,使用的时候直接写 count就行 //先导入mapState import {mapState} from 'vuex' computed:[ ...mapState(['count']) ]在对数据进行操作时,不能直接调用state的数据,如果要修改数据,需要在mutation里写方法,目的就是方便查找哪里除了问题 Mutations的作用与使用方法 mutations里面就是写对数据进行操作的方法的 mutations: { //存放修改数据的方法 add(state) { state.count++ } }使用方式一: 触发mutations函数,使用commit调用里面的方法名 this.$store.commit这是触发mutation的第一种方式 methods:{ handle(){ this.$store.commit('add') } }mutations传参mutation的方法里可以传递两个参数,第一个就是state,第二个是自定义的参数payload mutations: { //存放修改数据的方法 addN(state,N) { state.count+=N } }调用是在组件的方法里 methods:{ handle2(){ //触发mutation并传参 this.$store.commit('addN',4) } }使用方法二 在组件中导入vuex里的mapMutations函数 mapMutations(['sub'])是对里面的方法与store里的方法进行映射 ...是展开操作符 import {mapMutations} from 'vuex' methods:{ //将方法名写在[]里 ['addN','sub'] ...mapMutations(['sub']) btnhandle(){ //调用时直接写this.方法名 this.sub() //当传入参数时,直接写这个参数,不需要写state this.addN(4) } }注意:在Mutation函数里不能写异步代码;比如写定时函数,虽然页面会改变,但是实际状态数值不会变。于是就有了actions Actions的用法 Action用于处理异步任务。 如果通过异步操作变更数据,必须通过Action,而不能使用Mutation,但是在Action中还是要通过触发Mutation的方式间接变更数据. 在store里与mutations同级写一个actions:{ } 在它里面调用mutations的方法,然后在组件中触 发Actions mutations: { //存放修改数据的方法 add(state) { state.count++ } }, actions:{ //context是上下文 addAsync(context){ setTimeout(()=>{ //调用add方法,actions中不能直接修改state中的数据,只有mutation有这个权力 context.commit('add') }) } }使用actions要在组件中使用dispatch进行触发 btnHandle(){ //dispatch专门触发action this.$store.dispatch('addAsync') }actions传递参数 在store的actions里和mutations都要写形参 mutations: { //传参 addN(state,n) { state.count+=n } }, actions:{ //context是上下文 addAsync(context,n){ setTimeout(()=>{ //调用add方法,并传参 context.commit('addN',n) }) } }在组件中写实参 btnHandle(){ //dispatch专门触发action,并传入参数 this.$store.dispatch('addAsync',5) }第二种是展开并映射引入mapActions //引入方法 import {mapActions} from 'vuex methods:{ //映射actions ...mapActions(['addAsync']) btnhandle(){ //调用对应的actions this.addAsync() } } //也可以不写btnhandle方法了直接将映射的方法名写在点击操作上注意:在组件中调用actions方法,在actions中使用commit调用mutations方法 getters Getter用于对Store中的数据进行加工处理形成新的数据。不会修改原数据Getter可以对Store中已有的数据加工处理之后形成新的数据,类似Vue的计算属性。Store中数据发生变化,Getter的数据也会跟着变化.state:{ count:0 }, getters:{ showNum(state){ return '当前最新的数据是:'+state.count } }第一种调用方式:this.$store.getters.方法名 this.$store.getters.showNum第二种调用方式:映射展开,在computed中映射 import {mapGetters} from 'vuex' computed:{ ...mapGetters(['showNum']) }总结state是存放初始数据,进行数据初始化的,最好不要在组件里直接调用statemutations里面是存储对数据进行操作的方法,但是不能进行异步操作actions里面是进行异步操作的方法getters用于对Store中的数据进行加工处理形成新的数据相关推荐:《vue.js教程》 以上就是vuejs怎么实现全局状态管理的详细内容,更多请关注dnjidi.com其它相关文章! |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |